<template>
  <div class="index">
    <!--头部 start-->
    <div class="sreePublic">
      <div style="text-align: center;">
        <em class="iconfont" @click="vfun_back">&#xe61f;</em>
      </div>
      商品详情
      <div class="title-em"  @click="extendBtn">
        <em class="iconfont">&#xe6bb;</em>
      </div>
    </div>
    <!--头部 end-->
    <!--商品显示  start-->
    <div>
      <div class="section">
        <mt-swipe :auto="4500">
          <mt-swipe-item v-for="item in saleGoodsViewVo.basicFileVoList">
            <img :src="item.fileUrl" width="100%" height="100%">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="goods-text">
        <p class="goods-th">{{saleGoodsViewVo.goodsName}}</p>
        <span class="goodsCode">{{saleGoodsViewVo.goodsCode}}</span>
        <div class="goods-pice">
          <span>￥{{saleGoodsViewVo.goodsSalePrice}}</span><span>库存：{{saleGoodsViewVo.goodsNum}}</span>
        </div>
        <div class="goods-guige">
          {{saleGoodsViewVo.goodsSkuValue}}
        </div>
      </div>
    </div>
    <!--商品显示  end-->
    <!--点击进入店铺  start-->
    <div class="go_shop" @click="goShop_btn">
       <span><em class="iconfont">&#xe683;</em>店铺名称</span>
       <span>进入店铺<em class="iconfont">&#xe643;</em></span>
    </div>
    <!--点击进入店铺  end-->
    <!--商品介绍、售后保障  start-->
    <div class="goodsDesc-box">
      <div style="border-bottom: 1px solid #ccc;  height: 1rem;line-height: 1rem;">
        <div @click="vue_select=true" class="goodsDesTxt" ><span :class="{activeRed:vue_select}">商品介绍</span></div>
        <div @click="vue_select=false" class="goodsDesTxt"><span :class="{activeRed:vue_select==false}">售后保障</span></div>
      </div>
      <div v-if="vue_select">
        <div class="goodsDesc" v-html="saleGoodsViewVo.goodsDesc"></div>
      </div>
      <div v-else>
        <div class="goodsDesc" v-html="saleGoodsViewVo.goodsDesc1"></div>
      </div>
    </div>
    <!--商品介绍、售后保障  end-->
    <!--商品详情底部（菜单） start-->
    <div class="footer">
      <div class="foot-chlid">
        <div class="foot-left">
          <div @click="vfun_im"><em class="iconfont">&#xe60b;</em>联系</div>
          <!--<div :class="{activeConllect:vue_bb}" @click="vue_isCollected"><em class="iconfont">&#xe631;</em>{{vue_collect}}</div>-->
          <div @click="vfun_goodsCall"><em class="iconfont badge">&#xe65d;<i v-show="vue_badge_num!=0">{{vue_badge_num | badge}}</i></em>购物车</div>
        </div>
        <div class="foot-mid" v-show="saleGoodsViewVo.isAgented == false" @click="spread_btn">
          我要推广
        </div>
        <div class="foot-right" @click="popupVisible=true">
          加入购物车
        </div>
      </div>
    </div>
    <!--商品详情底部（菜单） end-->
    <!--选择规格  start-->
    <mt-popup v-model="popupVisible" position="bottom">

      <div class="guige">
        <div>
          <div class="guige-top">
            <em class="iconfont guigeon" @click="popupVisible=false">&#xe62d;</em>
            <div class="top-img">
              <img :src="saleGoodsViewVo.goodsBigPic" />
              <div>
                <span>￥{{saleGoodsViewVo.goodsSalePrice}}</span>
                <p>商品编码：{{saleGoodsViewVo.goodsCode}}</p>
              </div>
            </div>
          </div>
          <div class="guige-xunze">
            <div v-for="(sku,key) in saleGoodsSet.sumInfo.skuMap">
              <h1>{{key}}</h1>
              <a :class="{active:vfun_isSelected(key,item.valueName)&&!vfun_isSkuExit(item.exist),activehui:vfun_isSkuExit(item.exist)}" v-for="item in sku" @click="queryDataBySku(key,item.valueName,vfun_isSelected(key,item.valueName),vfun_isSkuExit(item.exist))">{{item.valueName}}</a>
            </div>
            <div style="margin-top: 0.8rem!important;position: relative;">
              <span>数量</span>
              <div style="position: absolute;top: -0.2rem;right: 0;">
                <el-input-number v-model="goodsNum" :min="1" :max="100">
                </el-input-number>
                <span style="color: #999;font-size:12px ;">{{saleGoodsViewVo.goodsNumUnit}}</span>
              </div>
            </div>
          </div>
          <div class="guige-ok" @click="save">
            确定
          </div>
        </div>
      </div>
    </mt-popup>
    <!--选择规格 end-->
    <!--分享弹出框  start-->
    <share-out @closeShowBtn="closeShow_share" v-show="shareShow" :closeShare="shareShow"></share-out>
    <!--分享弹出框  end-->
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
  import { Toast } from 'mint-ui'; //引入弹框
  import shareOut from '../../components/share/share';

  export default {
    name: 'index',
    components:{shareOut},     //分享组件
    data() {
      return {
        vue_select:true,   //显示（商品介绍）或（售后保障）的判断条件
        shareShow:false,   //判断二维码弹出框
        isAgented:false,   //判断是否显示推广按钮
        popupVisible: false,     //选择规格的弹框（是否显示）的判断条件
        vue_collect: '关注',  //关注的默认文本
        goodsNum: 1,   //规格弹框中，默认商品数量
        shopGoodsDetails: '',   //存储上个页面带过来的shopGoodsDetails（本地存储）
        //规格弹框（数据列表）
        saleGoodsSet: {
          "list": [], //数据列表(list[0]代表当前商品)
          "page": {}, //分页数据
          "sumInfo": {}, //汇总信息
        },
        saleGoodsViewVo: {}, //商品数据
        vue_badge_num:0,  //购物车数量显示
        BasicMemberAndMemberOperatorData:{},      //会员信息
      }
    },
    filters:{
      badge:function(val){        //购物车数量显示
        return val>99?'99+':val;
      }
    },
    methods: {

      //（点击）推广按钮
      spread_btn(){
        if(localStorage.getItem("memberCode") == null){
          this.$router.push({path:"/landing"})
        }else{
          this.axios({
            method: 'post',
            url: "/v3/sale/goodss/saveAgentGoods",
            data: {
              "goodsCode":localStorage.getItem("shopGoodsDetails"),
              "memberCode":localStorage.getItem("memberCode"),
            }
          }).then((res) => {
            this.goodsDetails();
            MessageBox({
              title: '提示',
              message: '商品已上架到店铺！',
              confirmButtonText:'分享',
              cancelButtonText:'确认',
              confirmButtonClass:'redBg',
              showCancelButton: true
            }).then(btnType=>{
              if(btnType=='confirm'){
                this.shareShow = true;
              }
            })
          }).catch((err) => {
            Toast({
              message: err.response.data,
              iconClass: 'fontSize iconfont icon-shibai'
            });
          });
        }
      },

      //购物车数量查询
      vFun_badge_cart() {
        if (localStorage.getItem("memberCode") != null) { //只有登录之后，才查询
          this.axios({
            method:"POST",
            url:"/v3/sale/cartGoodss/listAll",
            data:{}
          }).then((res)=>{
            this.vue_badge_num=res.data.list.reduce((countNum,item)=>{
              return countNum+item.goodsBuyNum
            },0)
          }).catch((err)=>{
          })
        }
      },

      //查询是否开通客服
      vfun_im() {
        this.axios({
          method:"GET",
          url:"v3/custom/accounts/00000000",
          data:{},
        }).then((res) =>{
          var sysNum = res.data.accountKey;
          var zhichiUrl = "https://www.sobot.com/chat/h5/index.html?sysNum="+sysNum;
          /*设置用户信息*/
          if(this.BasicMemberAndMemberOperatorData.memberName == ""||this.BasicMemberAndMemberOperatorData.memberName==undefined){
            zhichiUrl+="&uname=游客";//昵称
          }else{
            zhichiUrl+="&tel="+this.BasicMemberAndMemberOperatorData.operatorPhone;//电话或手机
            zhichiUrl+="&email="+this.BasicMemberAndMemberOperatorData.operatorEmail;//邮箱
            zhichiUrl+="&uname="+this.BasicMemberAndMemberOperatorData.memberName;//昵称
            zhichiUrl+="&face="+this.BasicMemberAndMemberOperatorData.operatorPortraitUrl;//头像URL
            zhichiUrl+="&realname="+this.BasicMemberAndMemberOperatorData.memberName;//真实姓名
            zhichiUrl+="&weibo=";//微博账号
            zhichiUrl+="&weixin=";//微信账号
            zhichiUrl+="&qq="+this.BasicMemberAndMemberOperatorData.operatorQq;//QQ号
            zhichiUrl+="&sex=";//0 女 1 男
            zhichiUrl+="&birthday=";//生日，如“1990-01-01”
            zhichiUrl+="&remark=";//用户的备注信息
          }

          /*设置title信息*/
          zhichiUrl+="&back=2";//设置back=1时，显示title
          zhichiUrl+="&titleFlag=3";//设置页面title的显示内容，有效值1、2、3；1 显示console后台设置的企业名称（默认），2 显示传入的固定文案1-30字符，3显示当前客服昵称（机器人昵称、人工客服昵称）
          zhichiUrl+="&customTtile='咨询客服'";//当titleFlag=2时，通过此参数设置固定文案内容，1-30字符

          /*设置商品信息*/
          zhichiUrl+="&title_info="+this.saleGoodsViewVo.goodsName;
          zhichiUrl+="&url_info="+window.location.host;
          zhichiUrl+="&abstract_info="+this.saleGoodsViewVo.goodsSkuValue;
          zhichiUrl+="&label_info="+this.saleGoodsViewVo.goodsSalePrice;
          zhichiUrl+="&thumbnail_info="+this.saleGoodsViewVo.goodsBigPic;
          window.location.href = zhichiUrl;
        }).catch((err) =>{
          this.axios({
            method: "GET",
            url: "/v3/member/operators?operatorCode=00000000",
          }).then((res) => {
            window.location.href = "tel:"+res.data.operatorPhone;
          }).catch((err) =>{
            Toast({
              message:"卖家未开通客服",
              iconClass: 'fontSize iconfont icon-shibai'
            });
          });

        });
      },

      //点击跳转购物车
      vfun_goodsCall() {
        if(localStorage.getItem("memberCode") == null){
          this.$router.push({path:"/landing"})
        }else {
          this.$router.push({path: "/cartShopping"})
        }
      },

      //获取商品详情（初始化页面数据）
      goodsDetails() {
        this.axios({
          method: 'GET',
          url: "/v3/sale/goodss/" + localStorage.getItem("shopGoodsDetails") + "/queryAppData/" +  localStorage.getItem("memberCode"),
          data: {}
        }).then((res) => {
          this.saleGoodsSet = res.data;
          this.saleGoodsViewVo = res.data.list[0];
          this.saleGoodsViewVo.goodsSalePrice=parseFloat(this.saleGoodsViewVo.goodsSalePrice).toFixed(2);
        }).catch((err) => {

        });
      },

      //判断当前规格值是否选中
      vfun_isSelected(key, item) {
        return this.saleGoodsViewVo.saleGoodsVoMapSkuMap[key] == item;
      },

      //判断规格值是否存在
      vfun_isSkuExit(data) {
        if(data == 0 || data == "0") {
          return true;
        } else {
          return false;
        }
      },

      //切换商品规格
      queryDataBySku(key, value, isSelected, isExisted) {
        /*
         *1.判断商品是否存在,和商品是否处于选中状态
         *2.拼接商品规格值
         *3.根据商品规格和商品 saleCode进行查询
         *4.通过goodsCode进行查询
         **/
        if(isSelected || isExisted) {
          return;
        }
        this.saleGoodsViewVo.saleGoodsVoMapSkuMap[key] = value;
        var saleGoodsSkuValueStr = "";
        for(var skuKey in this.saleGoodsViewVo.saleGoodsVoMapSkuMap) {
          saleGoodsSkuValueStr += skuKey + ":\r" + this.saleGoodsViewVo.saleGoodsVoMapSkuMap[skuKey] + ",";
        }
        saleGoodsSkuValueStr = saleGoodsSkuValueStr.substring(0, saleGoodsSkuValueStr.length - 1);
        this.axios({
          method: 'patch',
          url: "/v3/sale/goodss/" + this.saleGoodsViewVo.saleCode + "/queryDataBySku",
          data: {
            "goodsSkuValue": saleGoodsSkuValueStr,
          }
        }).then((res) => {
          if(res.data != null && res.data != undefined && res.data != "") {
            localStorage.setItem("goodsCode", res.data.goodsCode);
            this.goodsDetails();
          }
        }).catch((err) => {

        });
      },

      //商品加入购物车
      save(){
        if(localStorage.getItem("memberCode") == null){
          this.$router.push({path:"/landing"})
        }else {
          this.axios({
            method: 'POST',
            url: "/v3/sale/cartGoodss",
            data: {
              "goodsCode": this.saleGoodsViewVo.goodsCode,
              "goodsBuyNum": this.goodsNum
            }
          }).then((res) => {
            Toast({
              message: '添加成功',
              iconClass: 'fontSize iconfont icon-chenggong'
            });
            this.popupVisible = false;
            this.vFun_badge_cart();
            this.$router.push({path:"/cartShopping"})
          }).catch((err) => {
            Toast({
              message: err.response.data,
              iconClass: 'fontSize iconfont icon-shibai'
            });
          });
        }
      },

      //返回上个页面
      vfun_back() {
        history.back();
      },

      //关闭（分享）弹出框
      closeShow_share(){
        this.shareShow = false;
      },

      //点击（分享）按钮
      extendBtn(item,index){
        this.shareShow = true;
      },

      //点击跳转进入店铺
      goShop_btn(){
         this.$router.push({path:'/shopMine'})
      },
    },

    created(){
      this.vFun_badge_cart();  //请求badge数据
    },

    mounted() {
      this.goodsDetails();
    },

    activated(){
      this.shopGoodsDetails = localStorage.getItem("shopGoodsDetails");
      this.vFun_badge_cart();  //请求badge数据
      this.goodsDetails();
      this.axios({
        method: 'GET',
        url: "/v3/basic/members/" + localStorage.getItem("memberCode"),
        data: {}
      }).then((res) => {
        this.BasicMemberAndMemberOperatorData = JSON.parse(JSON.stringify(res.data));
      }).catch((err) => {

      });
    },
  }
</script>

<style scoped>
  /*进入店铺 end*/
  .go_shop span:nth-child(2) em{
    margin-left: 4px;
  }

  .go_shop span:nth-child(2){
    float: right;
  }

  .go_shop span:nth-child(1) em{
    margin-right: 4px;
  }

  .go_shop span:nth-child(1){
    float: left;
  }

  .go_shop{
    border-top: 0.3rem solid #e0e0e0;
    height: 1.3rem;
    line-height: 1rem;
    padding: 0 10px;
  }
/*进入店铺 start*/
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter,
  .fade-leave-to
    /* .fade-leave-active in <2.1.8 */

  {
    opacity: 0
  }

  .index {
    box-sizing: border-box;
    margin-bottom: 1.4rem;
  }

  .section {
    margin-top: 1.2rem;
    height: 9rem;
  }

  .sree {
    width: 100%;
    height: 1.2rem;
    background: url(../../assets/img/bg.jpg);
    background-size: auto 100%;
    color: #fff;
    z-index: 100;
    border-bottom: 1px solid #ccc;
    position: fixed;
    top: 0;
    width: 100%;
    display: -webkit-box;
  }

  .sree .sreinput {
    line-height: 0.6rem;
    background: #fff;
    -webkit-box-flex: 1;
    border-radius: 100px;
    height: 0.6rem;
    display: -webkit-box;
  }

  .sreinput input {
    display: block;
    border: 0;
    height: 0.8rem;
    margin-top: 1px;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    border-radius: 5px;
    font-size: 14px;
    text-indent: 10px;
    border: 1px solid #ccc;
  }

  .sree div {
    margin-top: 0.2rem;
  }

  .sree div em {
    display: block;
    color: #666;
    font-size: 25px;
    margin-left: 3%;
    line-height: 0.98rem;
  }

  .logo {
    padding: 0 2%;
    font-size: 25px;
    line-height: 0.8rem;
  }

  .land {
    padding: 0 2%;
    text-align: center;
    font-size: 25px;
    line-height: 0.8rem;
  }

  .land em {
    font-size: 20px;
  }

  .goods-th {
    font-size: 14px;
    font-weight: bold;
  }

  .goodsCode {
    font-size: 13px;
    color: #b0b0b0;
  }

  .goods-text {
    padding: 0.15rem 0.3rem;
    padding-bottom: 1.5rem;
  }

  .goods-text>p {
    line-height: 0.8rem;
  }

  .goods-pice {
    overflow: hidden;
    padding-top: 0.2rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #e0e0e0;
  }

  .goods-pice span:first-child {
    font-size: 18px;
    color: #D50B0A;
    /*float: left;*/
    margin-right: 0.2rem;
  }

  .goods-pice span:last-child {
    font-size: 13px;
    color: #b0b0b0;
    /*float: right;*/
  }

  .goods-guige {
    font-size: 14px;
    color: #666;
    margin-top: 0.15rem;
  }

  .goods-guige p {
    line-height: 0.6rem;
  }

  .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 1.4rem;
    font-family: "微软雅黑";
    box-shadow: 0 0 5px #ccc;
    z-index: 10;
    box-sizing: border-box;
  }

  .foot-chlid {
    display: -webkit-box;
  }

  .foot-left {
    -webkit-box-flex: 1.5;
    display: -webkit-box;
    background: #fff;
    padding-top: 0rem;
    font-size: 13px;
    line-height: 1.1;
  }

  .foot-mid{
    -webkit-box-flex: 1;
    background: #e87f1e;
    text-align: center;
    line-height: 1.4rem;
    height: 1.4rem;
    font-size: 16px;
    color: #fff;
  }

  .foot-right {
    -webkit-box-flex: 1;
    background: #D50B0A;
    text-align: center;
    line-height: 1.4rem;
    height: 1.4rem;
    font-size: 16px;
    color: #fff;
  }

  .foot-left div {
    text-align: center;
    font-size: 14px;
    -webkit-box-flex: 1;
  }

  .foot-left div em {
    display: block;
    font-size: 20px;
    padding-top: 8px;
  }

  .guige {
    width: 10rem;
    /*z-index: 9999;*/
    /*top: 100%;*/
    /*top: 110%;*/
    /*height: 8rem;*/
  }

  .guige>div {
    height:auto;
    min-height:6rem;
    position: relative;
    background: #fff;
    padding-bottom:3rem;
  }

  .guige-top {
    height: 2.2rem;
    border-bottom: 1px solid #ccc;
  }

  .top-img {
    width: 90%;
    margin: 0 auto;
  }

  .top-img img {
    float: left;
    border-radius: 5px;
    width: 2.4rem;
    height: 2.4rem;
    position: relative;
    top: -0.7rem;
  }

  .top-img div {
    float: left;
    margin-left: 0.3rem;
    margin-top: 0.2rem;
  }

  .top-img div span {
    font-size: 16px;
    color: #D50B0A;
  }

  .top-img div p {
    font-size: 14px;
    color: #888;
    margin-top: 0.3rem;
  }

  .guige-xunze {
    width: 90%;
    margin: 0 auto;
  }

  .guige-xunze div:last-child {
    font-size: 14px;
  }

  .guige-xunze>div {
    margin-top: 0.3rem!important;
  }

  .guige-xunze a {
    display: inline-block;
    height: 0.8rem;
    border: 1px solid #ccc;
    margin-right: 0.5rem;
    border-radius: 4px;
    text-align: center;
    line-height: 0.8rem;
    font-size: 14px;
    margin-top: 0.3rem;
    color: #565656!important;
    padding: 0 0.15rem;
  }

  .guige-xunze h1 {
    display: block;
    clear: both;
    margin-top: 0.6rem;
    margin-bottom: 0.1rem;
    font-size: 14px;
  }

  .guige-ok {
    display: block;
    position: absolute;
    bottom: 1%;
    width: 98%;
    background: #D50B0A;
    height: 1.4rem;
    margin-left: 1%;
    color: #fff;
    text-align: center;
    line-height: 1.4rem;
    font-size: 16px;
  }

  .active {
    border-color: #D50B0A!important;
    color: #D50B0A!important;
  }

  .activehui {
    border-color: #ccc!important;
    color: #ccc!important;
  }

  .activeConllect {
    color: #D50B0A;
  }

  .activeConllect em {
    color: #D50B0A;
  }

  .goodsDesc p img {
    width: 10rem!important;
  }

  .goodsDesc-box {
    border-top: 0.3rem solid #e0e0e0;
  }

  .guigeon {
    position: absolute;
    top: 0.1rem;
    right: 0.2rem;
  }
  /* start 徽章 */

  .badge {
    position: relative;
  }

  .badge>i {
    position: absolute;
    top: .1rem;
    left: 1rem;
    padding: 2px 4px;
    background: red;
    border-radius: 3px;
    font-size: 0.2rem;
    line-height: 1;
    color: #fff;
  }

  .goodsDesc-box .goodsDesTxt{
    float: left;
    width: 50%;
    text-align: center;
  }
  .goodsDesc-box .goodsDesc{
    padding: .1rem;
  }
  .activeRed{
    color: #d50b0a;
    border-bottom: 2px solid #d50b0a;
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.2rem;
    padding-bottom: .2rem;

  }
  /* end 徽章 */
</style>
